<template>
	<view class="hotelAll">
		<image class="hotelPn" :src="baseOssUrl + 'icon/hotel.png'" mode=""></image>
		<view class="hotelCotent ">
			<view class="hotelTab marin25">
				<!-- :isSlider='false' -->
				<fui-tabs :tabs="tabs" size='30' @change="changeTab" sliderBackground='#35743D' :short='false'
					selectedColor='#35743D'></fui-tabs>
				<view class="tab-panel-item padding25">
					<view class="b-line panel-content" @click="positionA">
						<view class="flex-box">
							<view class="flex-name">
								<view class="" v-if="address">
									{{address}}
								</view>
								<view class="add-name" v-else>
									微山岛
								</view>
								<image class="flex-jiant" :src="baseOssUrl+'icon/rightJt.png'" mode=""></image>
							</view>
							<!--  @click="getMeth" -->
							<view class="flex-wz">
								当前位置
								<image class="flex-icon" :src="baseOssUrl+'icon/dw.png'" mode=""></image>
							</view>
						</view>
					</view>
					<view class="b-line panel-content1">
						<fui-bottom-popup :show="popupShow" @close="closePopup">
							<view class="timeHeader">
								请选择日期
								<image :src="baseOssUrl+'icon/closePn.png'" mode="" @click="closePopup"></image>
							</view>
							<view class="fui-custom__wrap">
								<fui-calendar type="3" showLunar @change="calendarChange" activeBackground='#35743D'>
								</fui-calendar>
							</view>
							<fui-button text="完成" background="#35743D" width='96%' :margin="['0', '17rpx']"
								radius='50rpx' @click="savePopup"></fui-button>
						</fui-bottom-popup>


						<view class="flex-box" @click="showPopup">
							<view class="flex-ruzhu">
								<view class="ruzhu-text">
									明天入住
								</view>
								<view class="ruzhu-time" v-if="startWeek">
									{{startTime}}
									<view class="ruzhu-week">
										{{startWeek}}
									</view>
								</view>
								<view class="ruzhu-time" v-else>
									<!-- {{defaultStart}} -->
									{{startTime || '请选择入住时间'}}
									<view class="ruzhu-week">
										{{startShowWeek}}
										<!-- {{this.getWeekDate(this.defaultAllstart)}} -->
									</view>
								</view>

							</view>
							<view class="flex-lidian">
								<view class="lidian-text">
									后天离店
								</view>

								<view class="lidian-time" v-if="endWeek">
									<!-- 8月30日 -->
									{{endTime}}
									<view class="lidian-week">
										{{endWeek}}
									</view>
								</view>
								<view class="lidian-time" v-else>
									<!-- {{defaultEnd}} -->
									{{endTime || '请选择离店时间'}}
									<view class="lidian-week">
										{{endShowWeek}}
										<!-- {{this.getWeekDate(this.defaultAllstart)}} -->
									</view>
								</view>

							</view>
							<view class="time-all" v-if="fewNights">
								<!-- 共1晚 -->
								<view class="" >
									共{{fewNights}}晚
								</view>

								<image class="right-icon" :src="baseOssUrl+'icon/rightJt.png'" mode=""></image>
							</view>

						</view>
					</view>
					<view class="b-line panel-content">
						<view class="flex-box" @click="goSearch">
							<view class="flex-name name-search">
								<image class="flex-icon fangdj" :src="baseOssUrl+'icon/fdajing.png'" mode=""></image>
								<text v-if="searchValue">{{searchValue}}</text>
								<template v-else>
									<text v-if="tabFn == 0">品牌酒店名</text>
									<text v-if="tabFn == 1">请输入民宿名称</text>
									<text v-if="tabFn == 2">搜索地点关键词</text>
								</template>



							</view>
						</view>
					</view>
					<view class="b-line panel-content" @click="showPrice">
						<view class="flex-box flex-qj ">
							价格区间
							<text class="" v-if="minNum !== 300">
								￥{{minNum}}~￥{{maxNum}}
							</text>
							<text class="" v-else>
								￥{{minNum}}以上
							</text>

							<image class="flex-jiant" :src="baseOssUrl+'icon/rightJt.png'" mode=""></image>
						</view>
						<fui-bottom-popup :show="priceShow" @close="priceClosePopup" class="price-popup">
							<view class="fui-custom__wrap price-custom__wrap">
								<view class="price-warp">
									价格
									<image :src="baseOssUrl+'icon/closePn.png'" mode="" @click="priceClosePopup">
									</image>
								</view>
								<view class="price-rang">
									￥0
									<view class="">
										￥300以上
									</view>
								</view>
								<fui-slider class='progress-style' width='280' background='#35743D'
									activeColor='#B4B4B4' section showValue @change="sectionChange" :value='minNum'
									:endValue='maxNum' :max='300' :step='50'></fui-slider>
								<view class="price-introduce">
									<view class="price-items" @click="getRang(item)" v-for="item in priceRang"
										:class="{'active-rang' :item.id == isRang }">
										{{item.name}}
									</view>

								</view>
							</view>
							<view class="finish-btn">
								<fui-button text="完成" background="#35743D" width='96%' :margin="['0', '17rpx']"
									radius='50rpx' @click="pricePopup"></fui-button>
							</view>
						</fui-bottom-popup>
					</view>
					<!-- 搜索酒店 -->
					<view class="search-hotel">
						<fui-button background="#35743D" height='90rpx' radius='45rpx' text="搜索酒店"
							@click='goHotelList(0)' v-if="tabFn == 0"></fui-button>
						<fui-button background="#35743D" height='70rpx' radius='45rpx' text="查找民宿"
							@click='goHotelList(1)' v-if="tabFn == 1"></fui-button>
						<fui-button background="#35743D" height='70rpx' radius='45rpx' text="查找" @click='goHotelList(2)'
							v-if="tabFn == 2"></fui-button>
					</view>

				</view>


			</view>
			<!-- 推荐、酒店套餐 -->
			<view class="recommend">
				<fui-tabs :tabs="recomTabs" fontWeight='600' selectedFontWeight='600' @change="recomChange"
					sliderBackground='#35743D' selectedColor='#35743D' size='30' scale='1' background='#ececcf0'></fui-tabs>
				<view class="recomContent " v-show="recomtabFn==0">
					<fui-waterfall leftGap="24" rightGap="24">
						<fui-waterfall-item v-for="(item,index) in recommendList" :key="index"
							:src="baseOssUrl2 + item.headPhoto" @click="jumpBnt(item)">
							<view class="fui-text">{{item.title}}</view>
							<view class="fui-introduce">
								<view class="recom-introduce">
									{{item.guide}}
								</view>
							</view>
							<view class="fui-cont">
								<view class="price-cont" v-if="item.jgMin&&item.hdJgMin">
									￥{{(item.jgMin)>(item.hdJgMin)? item.hdJgMin:item.jgMin }}
									<view class="recom-qi">
										起
									</view>
								</view>
								<view class="price-cont" v-else>
									￥{{item.jgMin ||0}}
									<view class="recom-qi">
										起
									</view>
								</view>

								<view class="sold-num">
									已售{{item.xl}}+
								</view>
							</view>

						</fui-waterfall-item>
					</fui-waterfall>

				</view>
				<view class="recomContent" v-show="recomtabFn==1">
					<fui-waterfall leftGap="24" rightGap="24">
						<fui-waterfall-item v-for="(item,index) in hotelHotList" :key="index"
							:src="baseOssUrl2 + item.headPhoto" @click="jumpBnt(item)">
							<view class="fui-text">{{item.title}}</view>
							<view class="fui-introduce">
								<view class="recom-introduce">
									{{item.guide}}
								</view>
							</view>
							<view class="fui-cont">
								<view class="price-cont" v-if="item.jgMin&&item.hdJgMin">
									￥{{(item.jgMin)>(item.hdJgMin)? item.hdJgMin:item.jgMin }}
									<view class="recom-qi">
										起
									</view>
								</view>
								<view class="price-cont" v-else>
									￥{{item.jgMin||0}}
									<view class="recom-qi">
										起
									</view>
								</view>
								<view class="sold-num">
									已售 {{item.xl}}+
								</view>
							</view>

						</fui-waterfall-item>
					</fui-waterfall>
				</view>
				<!-- <text v-if="bottomShowText" style="padding: 30rpx 0;text-align: center;">到底部了</text> -->
				<fui-divider v-if="bottomShowText" text="没有更多了"></fui-divider>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		data() {
			return {
				pnItems: [],
				zcfwList: [], //政策服务
				tabFn: '',
				recomtabFn: '',
				bottomShowText: false,
				address: {
					hotel: '昆明',
					tickets: ['昆明', '杭州']
				},
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				tabs: [{
					//标签显示文本（String）
					name: '酒店'
				}, {
					name: '民宿公寓'
				}],
				//  {
				// 	name: '钟点房',
				// }, 
				recomTabs: [{
					//标签显示文本（String）
					name: '推荐'
				}, {
					name: '热门'
				}, ],
				recomImages: [{
					url: baseOssUrl + 'icon/tj.png',
					title: '荷源盛夏的民宿（微山荷源盛夏的民宿',
					introduce: '早餐不错',
					price: '¥399',
					qi: '起',
					costPrice: '¥499',
					soldNum: '已售 5000+'

				}, ],
				popupShow: false,
				staTimevalue: '',
				endTimevalue: '',
				startTime: '',
				endTime: '',
				startTime1: '',
				endTime1: '',
				startWeek: '',
				endWeek: '',
				defaultStart: '',
				defaultEnd: '',
				defaultWeek: '',
				defaultWeek1: '',
				defaultAllstart: '',
				defaultAllend: '',
				// 价格区间显示
				priceShow: false,
				minNum: 0,
				maxNum: 100,
				priceRang: [{
					name: '￥0~100',
					id: '0'
				}, {
					name: '￥100~150',
					id: '1'
				}, {
					name: '￥150~200',
					id: '2'
				}, {
					name: '￥200~300',
					id: '3'
				}, {
					name: '￥300以上',
					id: '4'
				}],
				isRang: '0',
				address: '',
				pageNum: 0,
				page: 1,
				limit: 10,
				total: '',
				longitude: 117.2407, //经度
				latitude: 34.656701, //维度
				ydTime: '', //入住时间区间
				// 酒店名称
				searchValue: '',
				// 超出300的价格
				ysjg: '',
				startShowWeek: '',
				endShowWeek: '',
				fewNights: '', //几晚
				recommendList: [], //推荐
				hotelHotList: [], //推荐
				jdList: [], //酒店设施
			}
		},
		onLoad(op) {
			this.searchValue = op.searchValue

		},
		created() {
			this.getData();
			console.log("cccc", this.startTime, this.defaultAllstart, this.startShowWeek)
		},
		onShow() {
			// this.getData();
			this.recommend()
		},
		// onPullDownRefresh() {
		// 	console.log('开始');
		// 	this.page = 1
		// 	setTimeout(function() {
		// 		console.info('请求结束')
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);

		// },
		// onReachBottom() {
		// 	if (this.pageNum >= 3) {
		// 		this.bottomShowText = true
		// 	} else {
		// 		for (var i = 0; i < 10; i++) {
		// 			this.recomImages.push({
		// 				url: baseOssUrl + 'icon/tj.png',
		// 				title: '荷源盛夏的民宿（微山荷源盛夏的民宿',
		// 				introduce: '早餐不错啊',
		// 				price: '¥399',
		// 				qi: '起',
		// 				costPrice: '¥499',
		// 				soldNum: '已售 5000+'

		// 			})
		// 		}
		// 		this.pageNum++;
		// 	}

		// },
		// onReachBottom() {
		// 	console.log("触底11",this.hoteldList.length,this.dataPages)
		// 	if (this.page >= this.dataPages ) {
		// 		this.fui.toast("到底了")
		// 		return false
		// 	}else{
		// 		this.page ++
		// 		this.getList() 
		// 	}
		// },

		methods: {
			jumpBnt(val) {
				if (val.hotelType) {
					this.pnItems.push(val.hotelType)
				}
				if (val.foodService) {
					this.pnItems.push(val.foodService)
				}
				if (val.deskService) {
					this.pnItems.push(val.deskService)
				}
				if (val.cleanService) {
					this.pnItems.push(val.cleanService)
				}
				// 政策服务 residenceLimit invoice residenceTime pet
				if (val.residenceLimit) {
					this.zcfwList.push(val.residenceLimit)
				}
				if (val.invoice) {
					this.zcfwList.push(val.invoice)
				}
				if (val.residenceTime) {
					this.zcfwList.push(val.residenceTime)
				}
				if (val.pet) {
					this.zcfwList.push(val.pet)
				}
				if (val.parkingLot) {
					this.jdList.push(val.parkingLot)
				}

				if (val.wifi) {
					this.jdList.push(val.wifi)
				}
				if (val.deskService) {
					this.jdList.push(val.deskService)
				}
				if (val.foodService) {
					this.jdList.push(val.foodService)
				}
				if (val.cleanService) {
					this.jdList.push(val.cleanService)
				}
				if (this.minNum == 300 && this.maxNum == 300) {
					this.ysjg = 300
				} else {
					this.ysjg = ''
				}
				if (this.staTimevalue) {
					this.staTimevalue = this.staTimevalue
				} else {
					this.staTimevalue = this.defaultAllstart
				}
				if (this.endTimevalue) {
					this.endTimevalue = this.endTimevalue
				} else {
					this.endTimevalue = this.defaultAllend
				}
				console.log("jdListjdList", this.jdList)
				uni.navigateTo({
					url: "/pages/hotelDetails/index?id=" + val.id + '&ydTime=' + this.ydTime + '&startTime=' + this.startTime +
						'&endTime=' + this.endTime + '&startWeek=' + this.startWeek + '&endWeek=' + this.endWeek + '&staTimevalue=' +
						this.staTimevalue + '&endTimevalue=' + this.endTimevalue + '&hotelTitle=' + val.title + '&address=' + val.address +
						'&pnItems=' + JSON.stringify(this.pnItems) + '&hotlPhone=' + val.phone + '&hotelGuide=' + val.guide +
						'&hotelFacilities=' + val.facilities+ '&unPolicy=' + val.unPolicy  + '&unDate=' + val.unDate + '&zcfwList=' + JSON.stringify(this.zcfwList)  + '&jdList=' +  JSON.stringify(this.jdList)
					//unPolicy 取消政策1,2，政策服务zcfwList（入驻限制，是否开发票，时间限制（逗号分隔的v），是否携带宠物）
				})
			},
			// 当前默认时间
			getData() {
				var data = new Date()
				var neaYear = data.getFullYear()
				var newMonth = data.getMonth() + 1
				var newData = data.getDate()
				var newDatas = data.getDate() + 1
				var wk = data.getDay()
				// var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				// this.defaultWeek = weeks[wk]  
				// this.defaultStart = newMonth + '月' + newData + '日'
				// this.defaultEnd = newMonth + '月' + newDatas + '日'
				newData = (newData > 9) ? newData : ("0" + newData);
				newDatas = (newDatas > 9) ? newDatas : ("0" + newDatas);

				this.startTime = newMonth + '月' + newData + '日'
				this.endTime = newMonth + '月' + newDatas + '日'
				this.startTime1 = newMonth + '-' + newData
				this.endTime1 = newMonth + '-' + newDatas
				// -日期- 


				this.defaultAllstart = neaYear + '-' + newMonth + '-' + newData
				this.defaultAllend = neaYear + '-' + newMonth + '-' + newDatas
				// 几晚
				console.info(this.defaultAllstart);
				console.info(this.defaultAllend)
				this.fewNights = this.getDiffDay(this.defaultAllstart, this.defaultAllend)
				console.log("默认几晚", this.fewNights)
				this.startShowWeek = this.getWeekDate(this.defaultAllstart)
				this.endShowWeek = this.getWeekDate(this.defaultAllend)
				console.log("星期", this.startShowWeek)
				console.log("星期1", this.endShowWeek)

				let arr = this.fui.getAllDate(this.defaultAllstart, this.defaultAllend)
				this.ydTime = arr.join(',')
			},
			// 用户选择时间
			calendarChange(e) {
				// this.fui.toast(e.value.join(','))

				this.staTimevalue = e.value[0]
				this.endTimevalue = e.value[1]
				let aStart = (e.lunar[0].cDay > 9) ? e.lunar[0].cDay : ("0" + e.lunar[0].cDay)
				let aEnd = (e.lunar[1].cDay > 9) ? e.lunar[1].cDay : ("0" + e.lunar[1].cDay)

				this.startTime = e.lunar[0].cMonth + '月' + aStart + '日'
				this.endTime = e.lunar[1].cMonth + '月' + aEnd + '日'
				// 搜索列表展示的时间
				this.startTime1 = e.lunar[0].cMonth + '-' + aStart
				this.endTime1 = e.lunar[1].cMonth + '-' + aEnd
				// 星期几
				this.startWeek = e.lunar[0].ncWeek
				this.endWeek = e.lunar[1].ncWeek
				this.fewNights = this.getDiffDay(this.staTimevalue, this.endTimevalue)
				console.log("几晚", this.fewNights, e)
			},
			// 获取星期  
			getWeekDate(date) {
				let tm = date
				let dt = new Date(tm.replace(/-/g,'/'))
				var day = new Date(dt).getDay();
				var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return weeks[day];
			},
			// 计算两个日期之间的差值
			getDiffDay(date_1, date_2) {
				let totalDays, diffDate
				let tm1 = date_1
				let dt1 = new Date(tm1.replace(/-/g,'/'))
				let tm2 = date_2
				let dt2 = new Date(tm2.replace(/-/g,'/'))
				let myDate_1 = Date.parse(dt1)
				let myDate_2 = Date.parse(dt2)
				// 将两个日期都转换为毫秒格式，然后做差
				diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值

				totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整

				return totalDays // 相差的天数
			},
			changeTab(e) {
				this.tabFn = e.index;
			},
			recomChange(e) {
				console.log("change", e)
				this.recomtabFn = e.index
				if (e.index == 0) {
					this.recommend()
				} else {
					this.hotelHot()
				}
			},
			// 推荐
			recommend() {
				this.$http.get(this.$httpApi.tjList, {
					data: {
						ydTime: this.ydTime,
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					if (res.code == 0) {
						this.recommendList = res.page
					}
				})
			},
			// 热门
			hotelHot() {
				this.$http.get(this.$httpApi.rmList, {
					data: {
						ydTime: this.ydTime,
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					if (res.code == 0) {
						this.hotelHotList = res.page
					}
				})
			},
			//调用此方法显示时间底部弹出层
			showPopup(type) {
				this.popupShow = true
			},
			closePopup(type) {
				this.popupShow = false
			},
			savePopup() {
				let arr = this.fui.getAllDate(this.staTimevalue, this.endTimevalue)
				this.ydTime = arr.join(',')
				this.popupShow = false
			},
			// end
			// 价格区间底部弹出层 start
			showPrice() {
				this.priceShow = true
			},
			priceClosePopup() {
				this.priceShow = false
			},

			// end

			positionA() {
				let _this = this
				wx.chooseLocation({
					success(res) {
						_this.address = res.name
						_this.longitude = res.longitude || 117.2407 //经度
						_this.latitude = res.latitude || 34.656701 //维度
						uni.setStorageSync('longitude', _this.longitude)
						uni.setStorageSync('latitude', _this.latitude)
					},
					fail(res) {}
				})
			},
			// 去搜索
			goSearch() {
				uni.navigateTo({
					url: "/pages/searchList/index"
				})
			},
			// 控制进度条
			//区间选择返回数据
			sectionChange(e) {},
			getRang(val) {
				switch (val.id) {
					case '0':
						this.minNum = 0
						this.maxNum = 100
						this.isRang = '0'
						break;
					case '1':
						this.minNum = 100
						this.maxNum = 150
						this.isRang = '1'
						break;
					case '2':
						this.minNum = 150
						this.maxNum = 200
						this.isRang = '2'
						break;
					case '3':
						this.minNum = 200
						this.maxNum = 300
						this.isRang = '3'
						break;
					case '4':
						this.minNum = 300
						this.maxNum = 300
						this.isRang = '4'
						break;
				}
			},
			// 完成
			pricePopup() {
				this.priceShow = false
			},
			goHotelList(index) {
				if(!this.startTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择入住时间',
						duration: 2000
					});
					return
				}
				if(!this.endTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择离店时间!',
						duration: 2000
					});
					return
				}
				if (index == 0) {
					if (this.minNum == 300 && this.maxNum == 300) {
						this.ysjg = 300
					} else {
						this.ysjg = ''
					}
					if (this.staTimevalue) {
						this.staTimevalue = this.staTimevalue
					} else {
						this.staTimevalue = this.defaultAllstart
					}
					if (this.endTimevalue) {
						this.endTimevalue = this.endTimevalue
					} else {
						this.endTimevalue = this.defaultAllend
					}
					uni.navigateTo({
						url: "/pages/hotelSearchList/index?ydTime=" + this.ydTime + '&title=' + this.searchValue +
							'&ksjg=' + this.minNum +
							'&jsjg=' + this.maxNum + '&ysjg=' + this.ysjg + '&startTime=' + this.startTime +
							'&endTime=' + this.endTime +
							'&startTime1=' + this.startTime1 + '&endTime1=' + this.endTime1 + '&startWeek=' + this
							.startWeek + '&endWeek=' +
							this.endWeek + '&staTimevalue=' + this.staTimevalue + '&endTimevalue=' + this
							.endTimevalue + '&longitude=' +
							this.longitude + '&latitude=' + this.latitude

						// + '&defaultAllstart=' + this.defaultAllstart + '&defaultAllend=' + this.defaultAllend

					})
				} else if (index == 1) {
					uni.navigateTo({
						// url: "/pages/homestay/index",
						url: "/pages/homestay/index?ydTime=" + this.ydTime + '&title=' + this.searchValue +
							'&ksjg=' + this.minNum +
							'&jsjg=' + this.maxNum + '&ysjg=' + this.ysjg + '&startTime=' + this.startTime +
							'&endTime=' + this.endTime +
							'&startTime1=' + this.startTime1 + '&endTime1=' + this.endTime1 + '&startWeek=' + this
							.startWeek + '&endWeek=' +
							this.endWeek + '&staTimevalue=' + this.staTimevalue + '&endTimevalue=' + this
							.endTimevalue + '&longitude=' +
							this.longitude + '&latitude=' + this.latitude
					})
				} else {
					uni.navigateTo({
						url: "/pages/hotelSearchList/index"
					})
				}

			}


		}
	}
</script>

<style lang="scss" scoped>
	.hotelAll {
		height: 100%;

		.hotelPn {
			width: 100%;
		}

		.hotelCotent {
			width: 100%;

			.hotelTab {
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: -100rpx;
				position: relative;
				z-index: 99;
				box-shadow: -5px 8px 18px 1px rgba(0, 0, 0, 0.1);

				/deep/.fui-tabs__scrollbox {
					border-radius: 5%;
				}

				// tab下的线条
				/deep/.fui-tabs__ac-line {
					bottom: 14rpx !important;
				}

				.tab-panel-item {

					.b-line {
						border-bottom: 1px solid #FFFFFF;
					}

					.panel-content {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.flex-box {
							display: flex;
							width: 100%;
							// margin: 5rpx 0 25rpx 15rpx;
							padding: 25rpx;
							justify-content: space-between;
							border-bottom: 1px solid #E0E0E0;

							.flex-name {
								color: #1D1D1D;
								font-size: 28rpx;
								display: flex;
								align-items: center;

								image {
									margin-left: 20rpx;
								}

								.add-name {
									font-weight: bold;
								}

							}

							.flex-jiant {
								width: 14rpx;
								height: 27rpx;
							}

							.flex-wz {
								display: flex;
								align-items: center;
								color: #35743D;
								font-size: 28rpx;
								border-left: 1px solid #E8E8E8;
								padding-left: 16rpx;

								image {
									margin-left: 20rpx;
								}
							}

							.flex-icon {
								width: 22rpx;
								height: 24rpx;
							}

							.name-search {
								color: #B4B4B4;
								font-size: 28rpx;

								.fangdj {
									width: 30rpx;
									height: 30rpx;
									margin: 0 10rpx 0 0 !important;
								}
							}


						}

						.flex-qj {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							color: #B4B4B4;
							font-size: 28rpx;

							image {
								width: 14rpx;
								height: 27rpx;

							}
						}

						.fui-custom__wrap {
							height: 100rpx;
							padding: 30rpx 0;

							.price-introduce {
								padding: 0 20rpx;
								display: flex;
								justify-content: flex-start;
								flex-wrap: wrap;
								margin-top: 20rpx;

								.price-items {
									float: left;
									background: #F8F8F8;
									height: 42rpx;
									font-size: 22rpx;
									color: #B4B4B4;
									line-height: 42rpx;
									margin: 8rpx 10rpx;
									padding: 14rpx 20rpx;

								}

								.active-rang {
									border: 1px solid #35743D;
								}

							}
						}

						.price-custom__wrap {
							.price-warp {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 10rpx 0 38rpx 0;
								position: relative;
								font-weight: bold;
								color: #1D1D1D;

								image {
									position: absolute;
									right: 30rpx;
									width: 30rpx;
									height: 30rpx;
								}
							}

							.price-rang {
								display: flex;
								justify-content: space-between;
								padding: 20rpx 20rpx;
								color: #7E7E7E;
								font-size: 24rpx;
							}

							.progress-style {
								/deep/.fui-slider__wrap-outer {
									width: 90%;
									margin: 0 5%;
								}

							}

						}

						// 价格弹窗
						.price-popup {
							padding: 40rpx 0;

							.finish-btn {
								height: 100rpx;
								margin-top: 300rpx;
							}
						}



					}

					.panel-content1 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						// 选择日历
						.timeHeader {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 30rpx 0;
							position: relative;

							image {
								position: absolute;
								right: 45rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}

						.flex-box {
							display: flex;
							width: 100%;
							padding: 25rpx;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid #E0E0E0;

							.flex-ruzhu {
								color: #393939;
								font-size: 28rpx;

								.ruzhu-text {
									line-height: 28rpx;
								}

								.ruzhu-time {
									color: #2E2E2E;
									display: flex;
									align-items: center;
									line-height: 60rpx;
									font-weight: bold;

									.ruzhu-week {
										margin-left: 8rpx;
										color: #2E2E2E;
										font-weight: 400;
									}
								}


							}

							.flex-lidian {
								color: #393939;
								font-size: 28rpx;

								.lidian-text {
									line-height: 28rpx;
								}

								.lidian-time {
									color: #2E2E2E;
									display: flex;
									align-items: center;
									line-height: 60rpx;
									font-weight: bold;

									.lidian-week {
										margin-left: 8rpx;
										color: #2E2E2E;
										font-weight: 400;
									}
								}
							}

							.time-all {
								color: #2E2E2E;
								font-size: 28rpx;
								display: flex;
								align-items: center;

								.right-icon {
									margin-left: 10rpx;
									width: 9rpx !important;
									height: 17rpx !important;
								}
							}

							.flex-icon {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					// 搜索酒店
					.search-hotel {
						width: 82%;
						margin: 0 auto;
						font-size: 28rpx;
						padding: 60rpx 0;
					}
				}

				.tab-active {
					color: #35743D;
				}
			}

			.recommend {
				// margin-top: 20rpx;
				width: 44%;
				padding-bottom: 100rpx;

				/deep/.fui-tabs__text {
					font-size: 26rpx;
				}

				/deep/.fui-tabs__item {
					padding-left: 0;
				}

				// tab下的线条
				/deep/.fui-tabs__ac-line {
					bottom: 14rpx !important;
				}

				.recomContent {

					// background-color: pink;
					/deep/.fui-waterfall__wrap {
						margin-top: 32rpx;
					}

					.fui-text {
						font-size: 28rpx;
						color: #1D1D1D;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 315rpx;
						margin-top: 24rpx;
					}

					.fui-introduce {
						display: flex;
						justify-content: space-between;
						overflow: hidden;
						width: 315rpx;

						.recom-introduce {
							float: left;
							background: #F8F8F8;
							height: 42rpx;
							font-size: 24rpx;
							color: #B4B4B4;
							line-height: 42rpx;
							padding: 6rpx;
							margin: 16rpx 5rpx;
						}

					}

					.fui-cont {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 90%;
						margin: 0 5%;
						padding-bottom: 15rpx;

						.price-cont {
							color: #D93C3C;
							font-size: 32rpx;
							display: flex;
							align-items: center;

							.costPrice-cont {
								margin-left: 10rpx;
								color: #B4B4B4;
								font-size: 20rpx;
								text-decoration: line-through;
							}
						}

						.recom-qi {
							margin-left: 5rpx;
							color: #393939;
							font-size: 20rpx;
						}

						.sold-num {
							color: #393939;
							font-size: 20rpx;
						}

					}
				}
			}
		}
	}
</style>
